<template>
  <div class="showColumns-box">
    <Input type="text" :maxlength="30" v-model="searchFields" placeholder="搜索字段" ></Input>
    <div style="border-bottom: 1px solid #e9e9e9; padding: 6px 0; margin: 6px 0">
      <Checkbox :indeterminate="indeterminate" :value="checkAll" @click.prevent.native="handleCheckAll">全选</Checkbox>
      <span>{{checkAllGroup.length}}/{{list.length}}</span>
    </div>
    <CheckboxGroup v-model="checkAllGroup" @on-change="checkAllGroupChange">
      <div class="checkbox-box">
        <div v-for="item in copyList" :key="item.defKey" class="checkbox-item">
          <Checkbox :label="item.defKey" :title="item.defName">{{ item.defName }}</Checkbox>
        </div>
        <div v-if="!copyList.length" class="no-data">暂无数据</div>
      </div>
    </CheckboxGroup>
  </div>
</template>

<script>
export default {
  name: "ShowColumns",
  components: {},
  props: {
    list: {
      type: Array,
      default: []
    },
    initColKeyList: {
      type: Array,
      default: []
    },
    title: {
      type: String,
      default: '显示列'
    },
  },
  data() {
    return {
      searchFields: "",
      indeterminate: false,
      checkAll: false,
      checkAllGroup: [],
      copyList: []
    };
  },
  created() {
    this.initList();
    this.init();
  },
  mounted() {},
  methods: {
    init() {
      this.$emit("SetTitle", this.title);
      this.$emit("SetPageWidth", 1020);
      this.$emit("SetPageActions", [
        {
          text: "确定",
          handle: () => {
            this.$emit("Close", this.checkAllGroup);
          }
        },
        {
          text: "取消",
          handle: () => {
            this.$emit("Close");
          }
        }
      ]);
      this.checkAllGroup = JSON.parse(JSON.stringify(this.initColKeyList));
      //this.list.filter(item => !item.optional).map(item => item.defKey);
      this.checkAllGroupChange(this.checkAllGroup);
    },
    handleCheckAll() {
      if (this.indeterminate) {
        this.checkAll = false;
      } else {
        this.checkAll = !this.checkAll;
      }
      this.indeterminate = false;

      if (this.checkAll) {
        this.checkAllGroup = this.list.map(item => item.defKey);
      } else {
        this.checkAllGroup = [];
      }
    },
    checkAllGroupChange(data) {
      if (data.length == this.list.length) {
        this.indeterminate = false;
        this.checkAll = true;
      } else if (data.length > 0) {
        this.indeterminate = true;
        this.checkAll = false;
      } else {
        this.indeterminate = false;
        this.checkAll = false;
      }
    },
    initList() {
      this.copyList = JSON.parse(JSON.stringify(this.list));
    }
  },
  computed: {},
  watch: {
    searchFields: {
      handler(val) {
        if (val.length) {
          this.copyList = this.list.filter(item => item.defName.indexOf(val) !== -1);
        } else {
          this.initList();
        }
      }
    }
  }
};
</script>

<style lang='less' scoped >
.showColumns-box {
  .checkbox-box {
    .checkbox-item {
      display: inline-block;
      width: 20%;
      margin: 1px 0;
      label {
        width: calc(100% - 16px);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
    }
  }
}
.no-data {
  margin-top: 20px;
  text-align: center;
  color: #909399;
}
</style>
